About
This original version of this tutorial is based on a project from the Maricopa Center for Learning and Instruction (MCLI) in Phoenix, Arizona (http://www.mcli.dist.maricopa.edu/tut/).
Writing HTML (hypertext markup language) was originally developed by Alan Levine, an instructional technologist at the Maricopa Community Colleges. It was originally conceived in 1994 and had been continually revised; this document is based on ver. 4.5.2 and has been specifically updated and adapted for this particular application by J. E. McCoy to meet more recent specifications. It is built around an all new subject matter, and includes samples to allow students to compare their progress.
A Note from the Author
This is now the updated version of that effort and has been converted to a more friendly format. Material has been updated along the way along with hundreds of example pages and images to make it easier to work with.
From the standpoint of teaching this subject to the novice, it created a steep challenge because of the constant evolution of the subject matter. The initial thought was to teach the basics of the hypertext markup language but as time progressed, so did the subject. As HTML progressed by 2 generations, another facet was brought into the equation. The advent of CSS (cascading style sheets) changed the way web pages would be created in a very significant way. This is also where the reality set in that one could not be tought one without the other. Unfortunately for the novice, this created a dilemma. Either subject in itself is a handful but trying to learn both simultaneously would have been too much. Therefore, in this first installment of HTML classes, there will be mention of obsolete material to get the student to fully realize the logical split that took place between content and presentation.
Why Create Web Pages
The web has become an integral part of our work (and leisure) world. You cannot do anything anymore these days without coming across a reference to a URL (if you do not know what a URL is, you will find out here). In a short time span, the web has revolutionized and then became instrumental in the way we access information, education, business, entertainment. It has created industries where there were none before.
Being able to develop information on the web might be a job skill, a class requirement, a business necessity, or a personal interest. Unlike any other previous medium, the ability to "write" HTML allows you to potentially connect with millions of other people, as your own self-publisher.
Anything you could possibly ever want to know is available online. Whether you are seeking information or looking to share it, the web has become the place to do it
Objectives
In these lessons you will:- Identify and use different HTML formatting codes.
- Create and modify HTML documents using a simple text editor.
- Write a series of web pages that present information, graphics, and provide hypertext links to other documents without the actual use of the internet.
The overall objectives is for you to have fun and expound your knowledge by introducing you to the basics of HTML.
What is HTML
Simply it is a format that tells a computer how to display a web page. The documents themselves are plain text files (ASCII) with special "tags" or codes that a web browser knows how to interpret and display on your screen.
This tutorial will teach you how to create web pages the old-fashioned way -- manually. There are many software tools that allow you to create web pages without using or knowing any HTML at all. Many of the web hosts you will encounter will offer some form of this software to allow you to create a quick and simple web presence. They are commonly referred to as "High Level Editors", "Drag and Drop" or "WYSIWYGs" (what you see is what you get). The problem with them is that they produce a lot of extraneous code. Just as an example, a simple web page created in Microsoft Word will turn out a file size up to 10 times larger than the same page produced in a text editor in plain HTML. This translates into using up your allocated bandwidth a lot faster if you posted a site that received a lot of traffic. It will also remove a lot of your ability to be artistic and design it to suit your specific needs and wants since most will consist of premade templates.
Just like with driving, you generally are not going to learn to drive in an exotic sports car. You would most likely start in something basic and then work your way up to higher performing cars as your driving skills improve.
If you are serious about doing more than a page or two, then learning the basics will greatly increase your knowledge and understanding of HTML, which will allow you to produce more efficient pages. Everything you create in this tutorial is designed to run from any desktop computer; it does not depend on access to a web server or specialized computer programming.
GETTING READY
You will also need a text editor program capable of creating plain text files like Notepad for Windows. It is highly recommended that you use the most basic text editor while you learn HTML and then later you can explore fancy HTML editors or "High Level Editors". You should also be familiar with switching between multiple applications as well as using the mouse to copy and paste selections of text.
It is suggested that you proceed through the lessons in order, but at any time you can return to the index to jump to a different lesson. Each lesson page has a link to a HTML Cheat Sheet for referencing tags. For convention, all menu names and items will be shown in bold text. All text that you should enter from the keyboard will appear in typewriter style.
Keep in Mind
- There is going to be some material included in this tutorial that is outdated and refers to older HTML standards. The reason is to include a view of how certain styling methods were accomplished prior to the advent of Cascading Style Sheets (CSS) and to give you a visual clue of how the application was intended to look.
- The intent was to write instructions generic to (almost) any web browser; sometimes the menu names or features may not match the web browser you are using.
- This tutorial will show you how to create web pages that can see outward to the world. It will not tell you how to let the world see them; to do this you need to locate an Internet Service Provider that provides web server space. When the opportunity presents itself, you may search for a free web page hosting service from Freewebspace.net
- Creating pages is one thing, designing web sites is another. It is highly recommended that you review the material from the Exploring Web Design Class and review information at this link: Foundation Website Creation with CSS XHTML and JavaScript.
- Refer to the HTML Cheat Sheet page as a reference. You can get to it by following the hypertext link in the overlay menu.
Lesson Index
Below are links to all of the lessons in this tutorial. All of the lessons are going to be done off-line since nothing is connected to the internet. Every effort was made to replicate these lessons as they were meant to be presented with the feel of a quasi-connected experience.
- Standardly Speaking About HTML
- Creating Your First HTML Document
- Modifying an HTML Document
- Headings: Six Levels Deep <:h1> <:h2> ...
- Breaking up into Paragraphs <:p> <:br> <:hr>
- Doing it with Style <:b> <:i> <:tt>
- Lists, Lists, and Lists <:ul> <:ol>
- Graphics and File Formats
- Linking it with Anchors
- Links to Local Files <:a href="file.html ...>
- URLs: Web Pointers http://, ftp://,...>
- Links to the World: Internet sites <:a href="http:// ...>
- Links to Sections of a Page <:a name= ...>
- HyperGraphic Links <:a href= ...><:img...><:/a>
- Special Characters é ©
- Definition Lists <:dl> <:dt> <:dd>
- Address Footers and E-Mail Links <:address> <:a href=mailto:...>
- You can Block quote Me on That <:blockquote>
- Lumping vs. Splitting
- Standard and Enhanced HTML
- Colorful and Textured Backgrounds <:body bgcolor=...>
- Spiffing Up Text <:font color=... face=... size=... > <:sup> <:sub> <:u>
- Easy Horizontal Rules <:hr>
- Extra Alignment <:div>, <:center> <:img vspace=..., hspace=...
- Setting the Table <:table...>
- More for Images and Lists <:BORDER=0..>, <:ol type=..>
- META in your HEAD <:META...>
- Target That Window <:a href=... target=...>
- Adding some FORM to your webs
- Cascading Style Sheets
- JavaScript
- In Conclusion
1. Standardly Speaking About HTML
There are always rules to follow. For HTML, fortunately, the rules are few in number and what they offer is large...
Objectives
This is just an introduction to some concepts behind HTML. After this lesson you will be able to:
- Express the importance of HTML standards
- Describe some of the differences between HTML 2.0, HTML 3.2, HTML 4.0 and HTML 5
Lesson
HTML, or HyperText Markup Language, is how a web browser displays its multimedia documents. The documents themselves are plain text files (ASCII) with special "tags" or codes that a browser knows how to interpret and display on your screen.
About those standards
No kidding -- the World Wide Web is exciting. It is everywhere. It has exploded beyond everybody's expectations. Keep in mind that the thing that makes the Web (and the Internet in general) work is agreed-upon by rules ("standards") that allow users of almost any kind of computer able to communicate and share information.
Where does HTML 101 fit into all of this?
What is covered in this tutorial is aimed toward producing documents that are compatible with current HTML standards.
By using "standard" HTML, your work is going to be most widely "shareable" in the fast changing future of the web. The early set of standards, known as HTML 2.0, were supported by nearly all web browsers.
Things got somewhat more complicated with the features included in HTML 3.2 since Netscape and Microsoft have introduced many features that go beyond standard HTML, and were at first supported by certain web browsers. The web really took off in popularity during the time of the 3.2 standard. By its original design, HTML was not designed as a formatting tool, yet people have found ways (some might say "tricks") to attempt to use HTML for precise web page formatting.
One of the recent standards is HTML 4.0 which contains more features for HTML and some attempts to reduce the complexities of different web browsers. This version started moving towards a more "logical" method of formatting web pages, via "Style Sheets" which allows the precise formatting web designers wish for, and in a way to separates it from the content, making it easy to update the design of a web site. However, it will take some time before this functionality is common and there are still bothersome differences between different web browser software (some "standards", yes?) These "standards" turn out to be recommendations as no one has the authority to enforce them!
The Web is a cool place in many ways, not least because you don't need to be a fortune-teller to see into the future. Because standards take time to develop, we already have an idea of what the future holds. For example, HTML is being constantly reviewed and since its inception has gone through many different version updates. A working group has been formed to look at developing an HTML 5 recommendation in order to clean up some of the loose ends from HTML 4 and create some uniformity in page structure. The group completed the first recommendations in 2008 and it the final recommendations were released in 2014(as you can see, it's a rigorous process that does take some time).
What does this mean? For accessibility on the widest range of possible web browsers and versions out there, stick with the most basic set of HTML code. Of course, this may limit what you'd like to put in a web page! If you include HTML that may look snazzy only in one particular browser but not another, you may turn people away from your site. Not only that, viewers of your web pages may not only be using different browsers, but their monitor size and fonts may not be the same as on the system you designed the pages.
After all, you are probably not going to spend all of this time designing web pages that are for your viewing only! The idea is to make something that the world can view. So the first section of lessons will take you through the most widely accepted features of HTML. From there, you can make the decision to use more of the "deluxe" features.
Review Topics
- What is HTML?
- What does the HyperText feature of HTML actually do?
- Why should you be concerned about differences in HTML standards?
2. Creating Your First HTML Document
You are about to embark on a journey that will transform you from a mere Internet Surfer of the Web to an Internet Author of Multimedia!Objectives
After this lesson you will be able to:- Identify the meaning and purpose of HTML tags.
- Open up a workspace for creating new HTML documents.
- Use a simple text editor to create the basic HTML structure for any web page.
- Insert non-displayed comments into your HTML files.
- Open your document within your web browser to see how it is displayed.
Lesson
Now that you know what HTML is, let's start using it. (Quick quiz -- what do those letters stand for? If you read the previous lesson you would know!).
What are HTML tags?
When a web browser displays a page such as the one you are reading now, it reads from a plain text file, and looks for special codes or "tags" that are marked by the < and > signs. The general format for a HTML tag is:
<tag_name>string of text</tag_name>As an example, the title for this section uses a header tag:
<h3>What are HTML tags?</h3>This tag tells a web browser to display the text "What are HTML tags?" In the style of header level 3 (More about these tags later). HTML tags may tell a web browser to bold the text, italicize it, make it into a header, or make it be a hypertext link to another web page. It is important to note that the ending tag, </tag_name>; contains the "/" slash character. This "/" slash tells a web browser to stop tagging the text. Most HTML tags are paired this way. If you forget the slash, a web browser will continue the tag for the rest of the text in your document, producing undesirable results (as an experiment you may want to try this later).
NOTE: A web browser does not care if you use upper or lower case for the tags. For example, <h3>...</h3> is no different from <H3>...</H3> but for the sake of uniformity, do not mix and match them.
Unlike computer programming, if you make a typographical error in HTML you will not get a "bomb" or "crash" the system; your web page will simply look, well... wrong. It is quick and easy to go inside the HTML and make the changes.
Your browser has a small but open vocabulary! An interesting aspect of HTML is that if the browser does not know what to do with a given tag, it will ignore it! For example, in this document you are viewing, the header tag for this section really looks like this:
<wiggle><h3>What are HTML tags?</h3></wiggle>
but since your browser probably does not support a <wiggle> tag (I made it up, perhaps in the future it could cause the text to wave across the screen?), it proceeds with what it knows how to do. If I were programming a new web browser, I might decide to add the functionality for the <wiggle> tag into my software.
Opening Up Your Workspace
To complete the lessons in this tutorial, you will have multiple windows open at one time. The first will be a web browser (most likely Firefox)this allows you to keep the lesson samples and a window as your actual workspace to view the produced page, plus open your text editor application in a third window. Here are the steps for setting up your "workspace":
- Since you are reading this, you already have the first part of your "workspace" open. If this page was opened from the F&CBP site, then it would have opened in a browser window already, meaning that Firefox is already running.
- Next, you need to open your text editor program which will be Notepad. Go to the Start Menu and click on All Programs, then Accessories; here you will find Notepad.
NOTE: The reason to have multiple working windows here is so that you can read the instructions for the lessons and also view your working document. It is not mandatory to have all windows open; it just makes your work easier.
NOTE: You will need to move back and forth between the different windows to complete these lessons. This can be a challenge depending on the size of your monitor. You may choose to resize the three windows so that they all fit on your screen or layer your windows so you can click on any of them to bring it to the front, or keep them maximized and use the Alt + Tab command to switch between them.
If you are just starting out, it is STRONGLY recommended that you use the simplest text editor available which will be Windows Notepad in this case. Why not use those nifty HTML editors? It is sound instructional design that you first learn the fundamentals and THEN look for shortcuts or helpers that make the work less tedious.
First, if you don't have one yet, create a folder in the "student's documents" folder and use your name for the folder name. Then create another folder inside of it and name it HTML101 and make sure that you keep all of the files you create in this one area. Managing them in this way will make your life simpler... well, at least while working on this tutorial!
Creating Your HTML Document
An HTML document contains two distinct parts, the head and the body. The head contains information about the document that is not displayed on the screen. The body then contains everything else that is displayed as part of the web page. The basic structure then of any HTML page is:
Example
<!DOCTYPE HTML">
<html lang="en-US">
<html>
<head>
<!-- header info used to contain extra information about this document, not displayed on the page -->
</head>
<body>
<!-- all the HTML content for display -->
</body>
</html>
The very first line:
<!DOCTYPE HTML">Is required and is a code that tells the browser what version of HTML the current page is written for. If the HTML code does not meet the listed Doctype, it will place a browser into quirks mode.
Hover here Quirks Mode is a legacy rendering mode in some browsers that allows the browser to behave like a previous version of that browser. Quirks Mode, by definition, works differently in various web browsers and does not fully follow any CSS specification. It is useful mainly for letting old sites live on without the need for maintenance and for allowing code built to work only in a specific browser to continue working. for more information.
Enclose all HTML content within <html>...</html> tags. Inside is first your <head>...</head> and then the <body>...</body> sections.
Also note the comment tags enclosed by <!-- blah blah blah -->. The text between the tags is NOT displayed in the web page but is for information that might be of use to you or anyone else who might look at the HTML code behind the web page. When your web pages get complicated (like you will see when we get into tables and other fun stuff about 20 lessons from now!), the comments will be very helpful when you need to update a page you may have created long ago.
Here are the steps for creating your first HTML file. Are you ready?
- If it is not open already, launch your text editor program (Notepad).
- Go to the text editor window.
- Enter the following text:
<html lang="en-US">
<html>
<head>
<title>Favorite Cars</title>
</head>
<!-- written for the Writing HTML Tutorial by A.Student, April 22, 2015-->
<body>
In this lesson you will use available information to research foreign and domestic cars that are much revered and then write a report on your results. </body>
</html>
NOTE: Look where the <title>...</title> tag is located. It is in the <head>...</head> portion and thus will not be visible on the screen. What does it do? The <title> tag is used to uniquely identify each document and is also displayed in the title bar of the browser window.
In lesson 4 you will learn how to add a string of text for a title that will appear directly on your web page.
NOTE: There is a comment tag inserted that lists the name of the author and the date the document was created. You could write anything in between the comment tags but it is only visible when you look at the source HTML for a web page.
Save the document as a file called "cars.html" and keep it in the "HTML101" folder/directory you set up for this tutorial.
By using this file name extension, a web browser will know to read these text files as HTML and properly display the web page.
Displaying Your Document in a Web Browser
- Return to the web browser window you are using for your "work space".
- Select Open... from the File menu.
- Use the dialog box to find and open the file you created, "cars.html" (../student's documents/your name/html101)
- You should now see in the title bar of the workspace window the text "Favorite Cars" and in the web page below, the one sentence of <body> text you wrote, "In this lesson..."
Check Your Work
A common mistake you will find is, "I cannot see the title!" You shouldn't!
Here is a sample of what it should look like. The text within the <title> ... </title> tag is NOT displayed on the web page itself; but you should see it in the title bar of the web browser window.
The most common mistake that beginners make here is that they try using a word processing program to type HTML and then are unable to open it in their browser, or if it does, the page is full of odd garbage characters. When you are starting out, it is advised that you use the most basic text editor such as Notepad or SimpleText for Macintosh. Look for shortcuts later!
Review Topics
- What are HTML tags?
- Where is the text of the title tag displayed?
- What steps are involved in creating a simple HTML document?
- How do you create a comment tag?
- How can you display your HTML document in a web browser?
Independent Practice
Think of a topic for your own web page. Now create your own HTML text file that includes a <title> tag and a few introductory sentences. Save the HTML file and reload it in your web browser. You are strongly encouraged to create a different folder/directory for this file so you do not get it mixed up with all of the Favorite Cars Web pages you will create for this tutorial. Use the files you create here for your independent practice as you go along with the tutorial, it will allow you to try out things you have learned along the way without messing up your ongoing work.
3. Modifying an HTML Document
Now that you have created your first HTML document, you will learn how to swiftly make changes in your document and view the updates within your web browser.
Objectives
After this lesson, you will be able to:
- Re-open the workspace for your web page.
- Make changes in your HTML document using the text editor.
- Reload the document in your web browser to see your changes.
Lesson
Re-opening Your WorkspaceTo complete this lesson, you will need to open a web browser window and re-open the text editor window you used in the first lesson. Here are the steps for re-opening your workspace (remember that the exact name of the menu commands may be different depending on which web browser you are using):
- If not open, create a new web browser window by selecting New Tab from the File menu.
- Use the Open... command from the File menu to find and open the HTML file you created in the previous lesson.
- Re-open your text editor program.
- In the text editor, open the file ("cars.html") you created in the previous lesson.
- Go to the text editor window.
- Below the text you typed from the previous lesson, press RETURN a few times and type the following text:
- Note that this text should be above the
People everywhere are fascinated by exotic, sporty and luxurious cars they most likely cannot even afford. This fascination is driven by a combination of exorbitant cost, beauty of the design, rarity, or brand recognition.